<template>
	 <div class="wrapper">
			<div class="page-title">首页</div>
      <div class="home-header">
				<img class="avatar" src="@/static/images/loginAvatar.png" alt="">
        <img class="bell" src="@/static/images/bell.png" />
      </div>
      <div class="home-content">
        <div class="panel first">
          <div class="link" @click="toPage('/pages/sick/index')">
            <div class="title">发起问诊</div>
            <div class="desc">疑难杂症求助</div>
          </div>
        </div>
        <div class="panel sed">
          <div class="link" @click="toPage('/pages/join/index')">
            <div class="title">参与问诊</div>
            <div class="desc">疑难解惑，分享经验</div>
          </div>
        </div>
        <div class="panel flexcenter third" @click="toPage('/pages/createCase/index')">
          <div url="/pages/addCase/index" class="flexcenter link">
            <img class="cardIcon" src='@/static/images/home-icon03.png' />
            <div class="card">添加病例</div>
          </div>
        </div>
        <div class="panel flexcenter foruth">
          <div class="flexcenter link" @click="toPage('/pages/sick/index')">
            <img class="cardIcon" src='@/static/images/home-icon04.png' />
            <div class="card">AI助诊</div>
          </div>
        </div>
        <div class="panel flexcenter fiveth">
          <div url="/pages/createCase/index" class="flexcenter link" @click="toPage('/pages/case/index')">
            <img class="cardIcon" src='@/static/images/home-icon05.png' />
            <div class="card">随访记录</div>
          </div>
        </div>
        <div class="panel flexcenter sixth">
          <div class="flexcenter link"  @click="opennNone" >
            <img class="cardIcon" src='@/static/images/home-icon06.png' />
            <div class="card">我的笔记</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
	import request from '../../utils/request'

export default {
  components:{
  },
  data() {
    return {
      tabIndex:0,
      cateList:[],
      subCateList:[],
      subCateIdx:0,
      cate_id:undefined,
      anchorListData:[]
    }
  },
  async onLoad() {

  },
  methods: {
    opennNone(){
      uni.showToast({
        title: '暂未开放',
        icon: 'none',
        mask: true
      })
    },
   toPage(url){
      uni.navigateTo({
        url: url
      });
   }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  min-height: 100vh;
	background: linear-gradient( 180deg, #0094FF 0%, rgba(101,190,255,0.605) 50%, rgba(255,255,255,0) 100%);
	.page-title {
		font-size: 40upx;
		color: #000000;
		padding: 60upx 40upx;
	}
  .home-header {
    display: flex;
    justify-content: space-between;
    padding: 0 40upx;
    margin-top: 40upx;
    .avatar {
      width: 120upx;
      height: 120upx;
    }
    .bell {
      width: 63upx;
      height: 65upx;
    }
  }
  .home-content {
    margin-top: 80upx;
    background: #fff;
    box-shadow: 0upx -8upx 40upx 0upx rgba(215,228,255,0.3);
    border-radius: 60upx 60upx 0upx 0upx;
    display: flex;
    flex-wrap: wrap;
    gap: 38upx;
    padding: 40upx 40upx 200upx;
    color: #fff;
    .panel {
      width: 316upx;
      height: 260upx;
      background-color: #0094FF;
      border-radius: 36upx;
      .link {
        width: 100%;
        height: 100%;
      }
      .title {
        font-size: 52upx;
        padding: 37upx 0 0 30upx;
      }
      .desc {
        color: #E2EBFF;
        font-size: 24upx;
        margin-top: 30upx;
        padding: 0 0 0 30upx;
      }
    }
    .first {
      background: linear-gradient( 135deg, #246BFD 0%, #9AE1FF 100%);
    }
    .sed {
      background: linear-gradient( 135deg, #00B1E9 0%, #68EFF8 100%);
    }
    .flexcenter {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .cardIcon {
        width: 90upx;
        height: 90upx;
        margin-bottom: 10upx;
      }
    }
    .third {
      background: #FDF6F0;
      color: #3C3C3C;
    }
    .foruth {
      background: #FEF0F0;
      color: #3C3C3C;
    }
    .fiveth {
      background: #F0F7FD;
      color: #3C3C3C;
    }
    .sixth {
      background: #E7F8FA;
      color: #3C3C3C;
    }
  }
}



</style>
